<template>
  <el-card>
    <div class="flex justify-end mb-5">
      <el-button
        type="primary" :icon="Plus"
        size="large"
        @click="handleClickCreate({}, 'add')"
        >{{$t('创建身份')}}</el-button>
    </div>
    <el-table :data="accountList" v-loading="loading">
      <el-table-column prop="role_name" :label="$t('名称')" align="center" width="200" />
      <el-table-column prop="permission" :label="$t('权限')" align="left" />
      <el-table-column
        prop="create_time"
        :label="$t('创建时间')"
        align="center" width="220"
        :formatter="formatterTime"
      />
      <el-table-column :label="$t('操作')" align="center" fixed="right" width="220">
        <template #default="scope">
          <el-button round type="warning" :icon="Edit" size="small"
            class="text-[#e54c5f] cursor-pointer pr-5"
            @click="handleClickCreate(scope.row, 'edit')"
            >{{$t('编辑')}}</el-button>
          <el-button round type="danger" :icon="Delete" size="small"
            class="cursor-pointer"
            @click="handleDeleteItem(scope.row)"
            >{{$t('删除')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-5 flex justify-center">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageable.total_count"
        :default-current-page="pageable.pageNum"
        @current-change="handleCurrentChange"
        :default-page-size="pageable.pageSize"
      />
    </div>
  </el-card>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  permissionsListGroupApi,
  deletePermissionsGroupApi,
} from "@/api/merchant/index";
import { ElMessageBox, ElMessage } from "element-plus";
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { formatterTime } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const loading = ref(true);
// 分页数据
const pageable = reactive({
  total_count: 0, //总条数
  pageNum: 1, //当前第几页
  pageSize: 20,
});
// 数据列表
const accountList = ref([]);
// 参数
const param = () => {
  return {
    page: pageable.pageNum,
    pagesize:pageable.pageSize,
  };
};
// 创建子账号
const handleClickCreate = ({ ...row }, type) => {
  router.replace({
    path: `${route.path}/create`,
    query: { id: row.id, type: type },
  });
};
//删除子账号
const handleDeleteItem = (item) => {
  ElMessageBox.confirm(t("您是否确认删除此身份?"), t("温馨提示"), {
    type: "warning",
  }).then(async () => {
    const res = await deletePermissionsGroupApi({ id: item.id });
    getListData();
    ElMessage.success("删除成功");
  });
};
//分页事件
const handleCurrentChange = () => {
  pageable.pageNum = number;
  getListData();
};
// 获取数据
const getListData = async () => {
  try {
    loading.value = true;
    const res = await permissionsListGroupApi(param());
   
    accountList.value = res.list;

    pageable.total_count = res.page.total_count;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
getListData();
</script>
